layui.define(['jquery', 'form', 'layer', 'element'], function(exports) {
    var $ = layui.jquery,
        form = layui.form,
        layer = layui.layer,
        element = layui.element;

    $(function () {
        $.post(__ctxPath+"/framework/SysMenu.do?method=listTree", function (response) {
            //根据menusJson动态生成layui的layui-nav
            let menuList = response.data;
            generatorMenus(menuList);
            initLeftNav();
        },"json");
    });

    function generatorMenus(menuList) {
        //第一步：动态生成layui-nav的html代码
        let html = generatorMenusRecursive(menuList);
        //第二步：设置html
        let leftNav = $("#layui-leftNav");
        leftNav.html(leftNav.html() + html);
        //第三步：使用element组件重新渲染nav
        element.render("layui-leftNav");
    }

    function generatorMenusRecursive(menuList){
        let html = ``;
        for(let menu of menuList){
            html += `<dd class="layui-nav-item">`;
            if(!menu.childList){
                //递归出口
                //如果 当前菜单没有子菜单，就是 a
                html += `<a href="javascript:;" _haschild="false" _lid="${menu.lid}" _url="${menu.url}" style="padding-left:${menu.deep * 10}px">${menu.cname}</a>`;
            }else{
                //递归入口
                //如果 当前菜单有子菜单，就是 a + dl
                html += `<a href="javascript:;" _haschild="true" _lid="${menu.lid}" style="padding-left:${menu.deep * 10}px">${menu.cname}</a>`;
                html += `<dl class="layui-nav-child">`;
                html += generatorMenusRecursive(menu.childList);
                html += `</dl>`;
            }
            html += `</dd>`;
        }
        return html;
    }

    /**
     * 初始化左边的导航栏
     */
    function initLeftNav() {
        //屏蔽右键点击事件
        window.oncontextmenu = function() {
            return false
        };

        //给左边的导航栏添加点击事件
        element.on('nav(layui-leftNav)', function(elem){
            var haschild = $(elem).attr("_haschild")
            var lid = $(elem).attr("_lid")
            var title = $(elem).text();
            var url = $(elem).attr("_url");

            if("true" == haschild){//如果有孩子，则点击不生成tab

            }else{//否则该菜单是叶子结点，点击生成tab
                //1.查看是否已经有该tab了
                var hasTab = $(`#layui-navTab ul li[lay-id=${lid}]`).length;
                //2.如果没有该tab，生成该tab；否则直接选择该tab
                if(hasTab==0){
                    element.tabAdd('layui-navTab', {
                        title: title
                        ,content: `<iframe tab-id=${lid} frameborder="0" src=${url} scrolling="yes" class="weIframe"></iframe>`
                        ,id: lid
                    });
                    element.tabChange('layui-navTab', lid);
                    FrameWH(); //渲染页面的width和height
                    initNavTabLeftClick(lid); //绑定左键
                    initNavTabRightClick(lid); //绑定右键菜单

                    //监听删除
                    element.on(`tabDelete(layui-navTab)`, function(data){
                        let layId = $("#layui-navTab .layui-this").attr("lay-id");
                        $(`#layui-leftNav dd[class=layui-this]`).removeClass(`layui-this`);
                        $(`#layui-leftNav a[_lid = ${layId}]`).parent(`dd`).addClass(`layui-this`);
                    });
                }else{
                    element.tabChange('layui-navTab', lid);
                }
            }
        });
    }

    /*
	 * 渲染页面的width和height
	 */
    function FrameWH() {
        var height = $(window).height() - 190;
        var width = $("iframe").parent().width();
        $("iframe").css("height", height + "px");
        $("iframe").css("width", width + "px");

        $(window).resize(function () {
            FrameWH();
        });
    }

    /**
     * 左键点击tab，左边菜单栏对应的菜单也要高亮
     */
    function initNavTabLeftClick(lid){
        $(`#layui-navTab ul li[lay-id= ${lid}]`).click(function(){
            $(`#layui-leftNav dd`).removeClass(`layui-this`);
            $(`#layui-leftNav a[_lid = ${lid}]`).parent(`dd`).addClass(`layui-this`);
        });
    }

    /*
	 * 绑定navTab的右键菜单
	 */
    function initNavTabRightClick(lid) {
        $(`#layui-navTab ul li[lay-id= ${lid}]`).mousedown(function(){
            let lid = $(this).attr("lay-id");
            mouseRight({menu: [{
                    itemName: "刷新该菜单",
                    icon:"fa fa-refresh fa-fw",
                    callback: function() {
                        //刷新菜单，tab、nav、iframe要显示刷新的页面
                        $(`#layui-navTab ul li[lay-id = ${lid}]`).click();
                        //刷新iframe
                        let iframe = $(`#layui-navTab iframe[tab-id=${lid}]`);
                        iframe.attr('src', iframe.attr('src'));
                    }
                }, {
                    itemName: "关闭该菜单",
                    icon:"fa fa-times fa-fw",
                    callback: function() {
                        //点击关闭按钮
                        $(`#layui-navTab ul li[lay-id = ${lid}] i`).click();
                    }
                },{
                    itemName: "关闭其他菜单",
                    icon:"fa fa-times fa-fw",
                    callback: function() {
                        //关闭其他菜单，tab、nav、iframe要显示还未关闭的页面
                        $(`#layui-navTab ul li[lay-id = ${lid}]`).click();
                        //点击关闭按钮
                        $(`#layui-navTab ul li[lay-id != ${lid}] i`).click();
                    }
                }]});
        });
    }



});

